<template>
  <div class="itinerary">
    <div class="begin"></div>
    <!--  行程部分-->
    <div v-for="(item, index) in items" >
      <div class="itinerary-odd-item" v-if="index%2 === 0">
        <div class="time">
          <div class="hour">{{ item.startTime.slice(0,5) }} - {{ item.endTime.slice(0,5) }} </div>
<!--          <div class="time-period">AM</div>-->
        </div>
        <div class="content">
          <div class="process-line">
            <div class="box1"></div>
            <div class="box2"></div>
          </div>
          <div class="detail">
            <img :src="item.imgUrl" alt="">
            <div class="itinerary-title">{{ $i18n.locale ==='zh' ? item.titleZhCn : item.titleEnUs }}</div>
<!--            <div class="itinerary-desc">Be sure to arrive at the sceneBe sure to arrive</div>-->
          </div>
        </div>
      </div>
      <div class="itinerary-event-item" v-else>
        <div class="content">
          <div class="detail">
            <img :src="item.imgUrl" alt="">
            <div class="itinerary-title">{{ $i18n.locale ==='zh' ? item.titleZhCn : item.titleEnUs }}</div>
<!--            <div class="itinerary-desc">Be sure to arrive at the sceneBe sure to arrive</div>-->
          </div>
          <div class="process-line">
            <div class="box1"></div>
            <div class="box2"></div>
          </div>

        </div>
        <div class="time">
          <div class="hour">{{ item.startTime.slice(0,5) }} - {{ item.endTime.slice(0,5) }}</div>
<!--          <div class="time-period">AM</div>-->
        </div>
      </div>
    </div>
    <!--  结束部分 -->
    <div class="itinerary-odd-item">
      <div class="time" style="height: 100px; width: 638px">
      </div>
      <div class="content" style="height: 100px;">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ItineraryComponents",
  props: {
    items: {
      type: Array,
      default: []
    }
  }
}
</script>

<style scoped>
.itinerary {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 1190px;
}

.itinerary-title,
.itinerary-desc {
  font-weight: 200;
  font-size: 16px;
}

.itinerary-title {
  color: #333333;
  padding-top: 18px;
}

.itinerary-desc {
  color: #999999;
}

.begin {
  width: 24px;
  height: 24px;
  display: block;
  background-color: #0068B5;
}

.itinerary-odd-item,
.itinerary-event-item {
  display: flex;
}

.itinerary-odd-item .time,
.itinerary-event-item .time {
  height: 215px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
}

.itinerary-odd-item .time {
  align-items: flex-end;
  width: 638px;
}

.itinerary-event-item .time {
  width: 640px;
  align-items: flex-start;
}

.time .hour {
  font-size: 24px;
  color: #333333;
}

.time .time-period {
  font-size: 16px;
  color: #999999;
}


.itinerary-odd-item .content,
.itinerary-event-item .content {
  width: 640px;
  display: flex;
  box-sizing: border-box;
}

.itinerary-odd-item .content {
  border-left: 1px solid #0068B5;
}

.itinerary-event-item .content {
  border-right: 1px solid #0068B5;
  justify-content: flex-end;
}

.itinerary-odd-item .content .process-line,
.itinerary-event-item .content .process-line {
  width: 114px;
  height: 174px;
  border-bottom: 1px solid #0068B5;
  position: relative;
}


.itinerary-odd-item .content .process-line .box1,
.itinerary-event-item .content .process-line .box1 {
  width: 14px;
  height: 14px;
  position: absolute;
  bottom: -7px;
  background-color: #00A3F6;
}

.itinerary-odd-item .content .process-line .box1 {
  left: -7px;
}

.itinerary-event-item .content .process-line .box1 {
  right: -7px;
}


.itinerary-odd-item .content .process-line .box2,
.itinerary-event-item .content .process-line .box2 {
  width: 18px;
  height: 18px;
  position: absolute;
  bottom: -9px;
  background-color: #0068B5;
}

.itinerary-odd-item .content .process-line .box2 {
  right: 0;
}

.itinerary-event-item .content .process-line .box2 {
  left: 0;
}

.itinerary-odd-item .content .detail,
.itinerary-event-item .content .detail {
  padding-top: 30px;
}

.itinerary-event-item .content .detail {
  text-align: right;
}

.itinerary-odd-item .content .detail img,
.itinerary-event-item .content .detail img {
  width: 238px;
  height: 134px;
  object-fit: cover;
}
</style>
